首先，一定是製作出好看的登入樣板，才足以對的起開了那麼久後端的自己！
所以我決定 https://v2.vuetifyjs.com/zh-Hans/getting-started/pre-made-layouts/

//反正我很閒

直接開 copy 官網模組來用～～～

<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<template>
<v-app id="inspire">
    <v-main>
        <v-container class="fill-height" fluid>
            <v-row align="center" justify="center">
                <v-col cols="12" sm="8" md="10">
                    <v-card class="elevation-12">
                        <v-toolbar color="primary" dark flat>
                            <v-toolbar-title>Login form</v-toolbar-title>
                            <v-spacer></v-spacer>
                            <v-tooltip bottom>

                                <span>Source</span>
                            </v-tooltip>
                        </v-toolbar>
                        <error v-if="error" />
                        <v-card-text>
                            <v-form>
                                <v-text-field v-model="email" label="email" name="email" prepend-icon="mdi-email" type="text"></v-text-field>

                                <v-text-field v-model="password" id="password" label="Password" name="password" prepend-icon="mdi-lock" type="password"></v-text-field>
                            </v-form>
                        </v-card-text>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="success" v-on:click="$router.push({name:'register'})">Register</v-btn>
                            <v-btn color="primary" v-on:click="login()">Login</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
    </v-main>
</v-app>
</template>

接下來是script的部分

<script>
/*eslint-disable*/
import error from "../components/error.vue";
export default {
    props: {
        source: String,

    },
    components: {
        error
    },
    data: () => ({
        email: "",
        password: "",
        error: false,
    }),
    methods: {

        login() {
            const vm = this;
            vm.axios.post('http://localhost:8000/api/login', {
                    email: vm.email,
                    password: vm.password
                }, {
                    headers: {
                        Accept: 'application/json',
                    }

                })
                .then(function (response) {
                    vm.error = false;
                    console.log(response);
                    localStorage.setItem("item", response.data.token);
                    vm.$router.push('/about/1');
                })
                .catch(function (response) {

                    vm.error = true;
                })

        }
    }
}
</script>

這樣出來的頁面就會長這樣

參考

• https://v2.vuetifyjs.com/zh-Hans/getting-started/pre-made-layouts/
• https://forum.gamer.com.tw/C.php?bsn=60076&snA=5664446